<template>
    <div>
        <tr>
            <td>姓名查询<input type="text" placeholder="请输入姓名"  v-model="sj.name" >
                年龄区间查询<input type="text" placeholder="请输入这个起始年龄"  v-model="sj.agemin"  >-<input type="text"  placeholder="请输入结束年龄"  v-model="sj.agemax"  >
                生日区间查询<input type="date" placeholder="起始日期" v-model="sj.start"  >-<input type="date" placeholder="结束日期" v-model="sj.end"  >
                等级查询
            <select v-model="sj.level"  > <option value="0">请选择</option>
                <option v-for="d in sele":value="d.mid"  >{{d.mname}}</option></select>
                状态查询<select v-model="sj.state" >
                    <option value=null>请选择</option>
                    <option value=true>启用</option>
                    <option value=false>禁用</option>
                </select>
                <input type="button" value="查询"  @click="show" >
                <input type="button" value="重置"  @click="cz" >
          </td>
          </tr>
<table class="table">
    <thead>      
        <tr>
        <input type="checkbox"  @change="list" v-model="yu" >
        <td>编号</td>
         <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>生日</td>
        <td>创建日期</td>
        <td>等级</td>
        <td>图片</td>
        <td>状态</td>
        </tr>
    </thead>
<tbody v-for="d in data">
    <tr>
        <input type="checkbox":value="d.id"  v-model="yingying" >
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.age}}</td>
        <td>{{d.sex==1?"男":"女"}}</td>
        <td>{{moment(d.birthday).format("YYYY年-MM月-DD日")}}</td>
        <td>{{moment(d.createtime).format("YYYY年-MM月-DD日")}}</td>
        <td>{{d.mname}}</td>
        <td><img :src="'https://localhost:7183/'+d.img" width="140px" height="140px" ></td>
        <td>{{d.state==true?"启用":"禁用"}}</td>
        <td><input type="button" value="修改" @click="update(d.id)"></td>
        <td><input type="button" value="批量删除" @click="delerome"></td>
        <td><input type="button" value="删除" @click="dele(d.id)"></td>
        <td><input type="button"  :value="d.state==true?'禁用':'启用'"   @click="state(d.id)"  ></td>
        </tr>
</tbody>
</table>
一共{{page.count}}条  , 一共是{{page.pagecount}}页  ,  每页显示{{sj.pagesize}}条  , 当前是{{sj.pageindex}}页
<input type="button" @click="fy(1)" value="首页" >
<input type="button" @click="fy(2)"  value="上一页" >
<input type="button"   v-for="d in page.pagecount":value="d"     @click="fany(d)"  >
<input type="button" @click="fy(3)" value="下一页" >
<input type="button" @click="fy(4)" value="尾页" >
<select @change="stu" v-model="sj.pagesize">
        <option :value=2 selected>2</option>
        <option :value=4>4</option>
        <option :value=5>5</option>
    </select>
<input type="text"   v-model="sj.pageindex" placeholder="请输入需要跳转的页数" ><input type="button" @click="tzy" value="跳转" >

    </div>
</template>




<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from "axios"
import moment from "moment"
import router from '@/router';


//显示的m
const data=ref([{
"id":0,
"name": "",
"age": 0,
"sex": 0,
"birthday": "",
"createtime": "",
"mid": 0,
"img": "",
"state": true,
//"isdele": true,
"mname":""
}])

//查询的方法
const stu=()=>{
    sj.value.pageindex==1
    show();
}


const  yingying=ref([])
const yu=ref(false)

//全选
const  list=()=>{
if(yu.value)
{
    data.value.forEach(e=>{
        yingying.value.push(e.id)
    })
}

else
{
    yingying.value=[]//全不选
}
}


const  fany=(val:any)=>
{
sj.value.pageindex=val
show();
}
const delerome=()=>{
    axios.get("https://localhost:7183/api/User/Remove",{params:{idlist:yingying.value.toString()}}).then(res=>{
        if(res.data>0)
    {
        alert('逻辑删除成功')
        show();
    }
    })
}
const  tzy=()=>{
    show();
}
const  sele=ref([{
     "mid": 1,
    "mname": "VIP"
}])
const cz=()=>{
    sj.value.name="",
    sj.value.agemin=0,
    sj.value.agemax=0,
    sj.value.end="",
    sj.value.start="",
    sj.value.level=0,
    sj.value.state=null,
    show();
}
const  state=(val:any)=>{
axios.get("https://localhost:7183/api/User/update",{params:{id:val}}).then(res=>{
    if(res.data>0)
{
    alert('修改成功')
    show();
}
})
}
const dele=(val:any)=>{
    axios.delete("https://localhost:7183/api/User/delete",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
        alert('删除成功')
        show();
    }
    })
}
const  sj=ref({
    "name":"",
    agemin:0,
    agemax:0,
    pageindex:1,
    pagesize:2,
    "end":"",
    "start":"",
    level:0,
    "state":null,

})


//枫叶
const fy=(val:any)=>{
    if(val==1)
{
    sj.value.pageindex=1
    show();
}
if(val==2)
{
    if(sj.value.pageindex==1)
{
    alert('页码超载')
    return;
}
sj.value.pageindex-=1
show();
}
if(val==3)
{
    if(sj.value.pageindex==page.value.pagecount)
{
    alert('页码超载')
    return;
}
sj.value.pageindex+=1;
show();
}
if(val==4)
{
    sj.value.pageindex=page.value.pagecount
    show();
}


}
const page=ref({
    count:0,
    pagecount:0
})


onMounted(()=>{
    show();
    selep();
})

//显示方法
const  show=()=>{
    axios.get("https://localhost:7183/api/User/Show",{params:sj.value}).then(res=>{
        data.value=res.data.list
        page.value.count=res.data.count
        page.value.pagecount=Math.ceil(page.value.count/sj.value.pagesize)
       
    })
}

//
const selep=()=>{
    axios.get("https://localhost:7183/api/User/sele").then(res=>{
        sele.value=res.data
    })
}
const update=(val:any)=>{
    router.push({path:"/update",query:{id:val}})
}
</script>

<style scoped>

</style>